<template>
	<view id="voteFour">
		<view class="vote-four-wrap">
			<view class="vote-title">
			{{directorType == 4 ? '业委会主任职务确认投票' 
			: directorType == 5 ? '业委会副主任职务确认投票'
			: directorType == 6 ? '工作组组长投票'
			: directorType == 9 ? '竞争性小组业主投票'
			: '未知'
			}}
			</view>
			<view class="vote-title sub-title" v-if="directorType == 4 || directorType == 5">投票开始时间：
				<!-- <template>
					<u-count-down :timestamp="this.publicityInfo.id ? 0 : diffTimeInfo.minutes * 60" separator="zh"
						separator-size="28" separator-color="#606266"></u-count-down>
				</template> -->
				{{voteDetailInfo.eight_director_time}}
			</view>
			<view class="vote-title sub-title" v-if="directorType == 6">投票结束时间：
				{{voteDetailInfo.leader_vote_end_time}}
			</view>
			<view class="vote-title sub-title" v-if="directorType == 9">投票结束时间：
				{{voteDetailInfo.negotiation_vote_end_time}}
			</view>
		</view>
		<view class="vote-vote-wrap" style="padding-bottom: 160rpx;">

			<view class="votePersonInfo" v-for="(item, index) in voteUserList">
				<view class="votePersonWrap" @click="nameListDetail(item)">
					<view class="">
						<image style="width: 180rpx;height:220rpx;" :src="item.user_coronal_photograph_img"></image>
					</view>
					<view class="personInfo">
						<view class="">姓名：{{item.full_name}}</view>
						<view class="">楼号：{{item.building_number}}</view>
						<view class="">性别：{{item.sexCode==2?"女":"男"}}</view>
						<view class="">民族：{{item.user_nation}}</view>
						<view class="">政治面貌：{{item.user_olitical_outlook}}</view>
					</view>
				</view>
				<view class="vote-bottom-btn">
					<view class="" v-if="alreadyVoteTotal == 0">投票后可查看票数</view>
					<view style="color:#000;font-weight: bold;" v-if="alreadyVoteTotal != 0">
						已投
						{{directorType == 4 ? item.director_vote_total 
						: directorType == 5 ? item.deputy_director_vote_total 
						: directorType == 6 ? item.work_group_leader_vote_total 
						: directorType == 9 ? item.negotiation_owner_vote_total 
						: "未知"  
						}}
						票
					</view>
					<view class="btn" @click="addUpdateVote(item,index)" v-if="!item.whetherVote && alreadyVoteTotal == 0">
						{{directorType == 4 ? '选Ta为主任' : directorType == 5 ?'选Ta为副主任' :  directorType == 6 ? '选Ta为组长' : '选Ta为组员'}}
					</view>
					<view v-if="item.whetherVote" @click="cancelAdd(item,index)" class="btn already">已投票</view>
				</view>
			</view>
		</view>
		<br><br><br><br>
		<view class="bottom-btn" v-show="alreadyVoteTotal == 0">
			<view class="submit-vote" @click="confirmAddVote">
				确认投票
			</view>
		</view>

		<!-- 用户认证 -->
		<view style="position: relative;">
			<view class="meeting-dialog">
				<u-popup v-model="isCertification" mode="center" border-radius="14">
					<view class="meeting-wrap">
						<view class="meeting-title">
							未提交认证
						</view>
						<view class="meeting-start">
							<image class="img" src="../../../static/vote/seconded.png"></image>
						</view>
						<view class="meeting-cont">
							请先进行实名认证后进行附议
						</view>
						<view class="meeting-btn" @click="submit()">
							提交认证
						</view>
					</view>
				</u-popup>
			</view>
		</view>

		<!-- 确认投票弹窗 -->
		<view class="modal" v-if="confirm">
			<view class="modal-cont">
				<view class="modal-title">确认投票</view>
				<view style="color: #000000;margin-top: 30px;">
					是否确认投票
				</view>
				<view class="modal-bottom">
					<view class="btn-cancel" @click="confirm = false">关闭</view>
					<view class="btn-sure" @click="addVote()">确定</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />


	</view>
</template>

<script>
	export default {
		props: ['id', 'directorType'],

		data() {
			return {
				alreadyVoteTotal: 0,
				checkVoteTotal : 0,
				//表决详情
				voteDetailInfo: {},
				//剩余时间详细
				diffTimeInfo: {},
				voteUserList: {},
				userId: uni.getStorageSync('rawData').userId,
				voteUserInfo: {},
				confirm: false,
				centert: {}, //选中的投票对象
				checkIndex: null, //选中的投票对象下标
				isCertification: false, //用户认证
				publicityInfo: {},
				timeRemaining : {},//至开始时间剩余多少

			}
		},
		created() {
			console.log(this.id)
		},
		mounted() {
			this.getVoteDetailInfo();
			//获取选择人集合
			this.getVoteUserList();
			//获取操作人认证详细
			this.getVoteUserInfo();
			//查询委员公示信息
			this.getPublicityInfo(12);
			this.verifyVoteTotal();

		},
		methods: {
			//校验是否投过票
			verifyVoteTotal() {
				this.$requestYz.api.verifyVoteTotal({
					essential_information_id: this.id,
					voteType: this.directorType,
					user_id: uni.getStorageSync('rawData').userId,
				}).then(res => {
					this.alreadyVoteTotal = res.data.data.data
				})
			},
			//确认投票
			confirmAddVote() {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				if (this.checkVoteTotal == 0) {
					this.$refs.uToast.show({
						title: '请选择投票对象',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.voteUserList.forEach((item, index) => {
					if (item.whetherVote == true) {
						this.$requestYz.api.ownerVote({
							id: item.id,
							user_id: uni.getStorageSync('rawData').userId,
							user_name: this.voteUserInfo.full_name,
							voteType: this.directorType, //1.筹备组投票
							user_building_number: this.voteUserInfo.building_number //投票人房间信息
						}).then(res => {})
					}
					if (index == this.voteUserList.length - 1) {
						
						uni.showToast({
							title: '投票成功！',
							icon: 'success'
						});
						let that = this;
						setTimeout(function(){
							that.alreadyVoteTotal = 1
							that.checkVoteTotal = 0;
							that.getVoteUserList();
						},1000);
					}
				});
				
			},
			cancelAdd(item, index) {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.voteUserList[this.checkIndex].whetherVote = false;
				this.voteUserList[this.checkIndex].director_vote_total = this.voteUserList[this.checkIndex]
					.director_vote_total - 1
				this.checkVoteTotal = this.checkVoteTotal - 1;
			},
			nameListDetail(item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/vote/components/publicity/nameDetail?item=' + items
				})
			},
			getPublicityInfo(val) {
				this.$requestYz.api.getRecordInfo({
					contentStatus: val,
					id: this.id
				}).then(res => {
					this.publicityInfo = res.data.data;
				})
			},
			addVote() {
				this.voteUserList[this.checkIndex].whetherVote = true;
				this.voteUserList[this.checkIndex].director_vote_total = this.voteUserList[this
					.checkIndex].director_vote_total + 1
				this.checkVoteTotal = this.checkVoteTotal + 1;
				this.confirm = false
			},
			//提交认证
			submit() {
				this.isCertification = false;
				uni.navigateTo({
					url: './submitAuth?vote_id=' + this.id + "&proName=" + this.voteDetailInfo.community_name
				})
			},
			getVoteUserInfo() {
				this.$requestYz.api.getVoteUserInfo({
					vote_id: this.id,
					user_id: this.userId,
				}).then(res => {
					this.voteUserInfo = res.data.data
				})
			},
			//投票
			addUpdateVote(item, index) {
				if(this.publicityInfo.id){
					this.$refs.uToast.show({
						title: '投票已结束',
						type: 'warning',
						icon: false
					})
					return;
				}
				//工作组投票
				if(this.directorType == 6){
					//工作组组员可投票
					if(this.voteUserInfo.preparation_status == 0){
						this.$refs.uToast.show({
							title: '工作组组员才可投票',
							type: 'warning',
							icon: false
						})
						return;
					}
				}
				
				if(this.directorType == 4 || this.directorType == 5){
					if (this.timeRemaining.minutes != 0 ) {
						this.$refs.uToast.show({
							title: '投票未开始',
							type: 'warning',
							icon: false
						})
						return;
					}
					//只要委员才可投票
					if(this.voteUserInfo.members_state != 1){
						this.$refs.uToast.show({
							title: '委员才可投票',
							type: 'warning',
							icon: false
						})
						return;
					}
				}
				
				
				if (!this.voteUserInfo.id || !this.voteUserInfo.building_number) {
					this.isCertification = true
					return
				}
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				if(this.voteDetailInfo.four_directors__number == this.checkVoteTotal){
					this.$refs.uToast.show({
						title: '可投票数已达上限',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.checkIndex = index;
				this.centert = item
				this.confirm = true;
			},

			//表决详细
			getVoteDetailInfo() {
				this.$requestYz.api.getVoteDetailInfo({
					id: this.id,
				}).then(res => {
					this.voteDetailInfo = res.data.data.voteInfo;
					// this.getTimeDiffInfo();
					this.getTimeRemaining();
				})
			},
			getTimeRemaining(){
				this.$requestYz.api.getDiffTime({
					endTime: this.voteDetailInfo.eight_director_time
				}).then(res => {
					this.timeRemaining = res.data.data;
				})
			},
			//获取剩余时间
			getTimeDiffInfo() {
				this.$requestYz.api.getDiffTime({
					endTime: this.voteDetailInfo.eight_director_time
				}).then(res => {
					this.diffTimeInfo = res.data.data;
				})
			},
			//获取人列表
			getVoteUserList() {
				this.$requestYz.api.getOwnerAppVoteUserList({
					essential_information_id: this.id,
					voteType: this.directorType,
					user_id: this.userId,
				}).then(res => {
					this.voteUserList = res.data.data.datalist;
				})
			},

		}
	}
</script>

<style lang="scss">
	$color:#999;
	$bold:bold;
	.bottom-btn {
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	
		.submit-vote {
			width: 570rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			margin: 12rpx auto;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
		}
	}

	.meeting-dialog {
		position: relative;

		::v-deep .u-mode-center-box {
			width: 670rpx !important;
			height: 800rpx;
			background: #FFFFFF !important;
			border-radius: 12rpx !important;
		}

		

		.meeting-wrap {
			padding: 40rpx;
		}

		.meeting-title {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 20px;
			border-bottom: 1px solid #E7ECE1;
		}

		.meeting-start {
			margin: 40rpx 0 24rpx;
			font-size: 16px;
			font-weight: bold;

			.img {
				width: 160px;
				height: 114px;
				margin: 0 auto;
				transform: translate(74px, 8px);
			}
		}

		.meeting-cont {
			color: red;
			font-size: 32rpx;
			border-bottom: 60rpx;
			margin-top: 50rpx;
			margin-bottom: 120rpx;
			text-align: center;
		}

		.succ {
			color: #333300;
			font-weight: bold;
		}

		.meeting-btn {
			width: 350rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;
			border-radius: 22px;
			border: 1px solid #427705;
			text-align: center;
			color: #427705;
			margin: 40px auto;
			font-weight: bold;
		}
	}

	#voteFour {
		.vote-four-wrap {
			.vote-title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx auto 0;
				text-align: center;
			}

			.sub-title {
				font-size: 28rpx;
				margin: 20rpx auto 40rpx;
				font-weight: $bold;
				color: $color;
			}

			.colors {
				color: red;
			}
		}

		.modal {
			/* width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba($color: #000000, $alpha: 0.6);
			z-index: 999; */
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 10;
		}

		.modal-cont {
			width: 610rpx;
			// min-height: 420rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.modal-icon {
			width: 80rpx;
			height: 80rpx;
			margin-top: 67rpx;
		}

		.modal-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 45rpx;
			margin-top: 22rpx;
		}

		.modal-content {
			width: 443rpx;
			// height: 88rpx;
			font-size: 28rpx;
			text-align: center;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
			margin-top: 24rpx;
		}

		.text-area {
			margin-top: 24rpx;
			width: 520rpx;
			padding: 10rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 44rpx;
			max-height: 105rpx;
			border: 1rpx solid #f0f0f0;
			border-radius: 8rpx;
		}

		.modal-bottom {
			width: 100%;
			height: 84rpx;
			border-top: 1rpx solid #e6e9ed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;
		}

		.btn-cancel {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			border-right: 1rpx solid #d8d8d8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-cancel1 {
			width: 100%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			/* border-right: 1rpx solid #d8d8d8; */
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-sure {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #578ef0;
		}


		.votePersonInfo {
			width: 100%;
			height: 400rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 0px 0px #EEEEEE;
			margin-top: 40rpx;

			.votePersonWrap {
				padding: 30rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #999;
				box-shadow: 0px 1px 0px 0px #eee;
			}

			.personInfo {
				margin-left: 40rpx;
				line-height: 46rpx;
			}

			.vote-bottom-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding: 0 30rpx;
				color: #999;

				.btn {
					width: 200rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #76D904 0%, #417505 100%);
					border-radius: 44rpx;
					color: #fff;
					line-height: 60rpx;
					text-align: center;
				}

				.already {
					background: #FFFFFF;
					color: #999;
					border: 1px solid #CCCCCC;
				}
			}
		}

		.single-button {
			width: 100%;
			height: 77px;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
		}

		.single-button .btn {
			width: 238px;
			height: 40px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			color: #fff;
		}

	}
</style>
